<template>
	<scroll-view class="MScrollView" scroll-y :style="{height}" @scrolltolower="load">
		<slot></slot>
		<view class="loading" v-if="state.isLoading">努力加载中</view>
		<view class="loading" v-if="!state.isLoading && state.noMore && state.list.length>0&&state.Page>1">没有更多啦 </view>
		<image class="empty" src="/static/img/empty.png" mode="heightFix" v-if="!state.isLoading && state.list.length==0"></image>
	</scroll-view>
</template>

<script setup>
	import { reactive } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	const state = reactive({
		Page: 1,
		PageSize: 100,
		list: [],
		noMore: false,
		isLoading: true,
		twiceList: []
	})

	const emit = defineEmits(['list'])

	const props = defineProps({
		height: {
			type: String,
			default: '100%'
		},
		api: {
			type: Function
		},
		sInfo: {
			type: Object,
			default: {}
		},
		searchInfo: {
			type: Object,
			default: {}
		},
		filterFlag: {
			type: String,
			default: ""
		}
	})

	onLoad((query) => {})

	const up = () => {
		if (state.noMore) return
		state.isLoading = true
		if (state.Page == 1) state.list = []
		// 过滤 过滤条件
		if (props.filterFlag) props.sInfo.FilterString = props.sInfo.FilterString.filter(it => !props.filterFlag.includes(it.filterFlag))
		
		props.api({
			data: {
				...props.sInfo,
				StartRow: (state.Page - 1) * state.PageSize,
				Limit: state.PageSize
			}
		}).then(res => {
			if (res) {
				state.list = state.list.concat(res)
				if(state.twiceList.length){
					let list = state.list.filter(item => state.twiceList.findIndex(it => it.FNumber === item.FNumber) > -1)
					state.list = list
				}
				state.isLoading = false
				if (res.length < state.PageSize) {
					state.noMore = true
				} else {
					state.Page = state.Page + 1
				}
				emit('list', state.list)
			}
		})
	}
	const init = () => {
		state.list = []
		state.Page = 1
		state.noMore = false
	}
	const load = () => {
		up()
	}

	const reUp = (twiceList) => {
		init()
		up()
		if (twiceList.length) state.twiceList = twiceList
	}

	defineExpose({
		up,
		reUp,
		load,
		init
	})
</script>

<style lang="scss" scoped>
	.MScrollView {

		.loading {
			line-height: 80rpx;
			text-align: center;
		}

		.empty {
			margin-left: 50%;
			transform: translate(-50%, 0);
		}
	}
</style>